<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>树洞</title>
    <!-- head 中 -->
    <link rel="stylesheet" href="jquery-weui/dist/lib/weui.min.css">
    <link rel="stylesheet" href="jquery-weui/dist/css/jquery-weui.css">
    <script type="text/javascript" src="jquery-weui/underscore.js"></script>

    <script id="jsontem" type="text/template">
        <%for(var i=0;i< list.length;i++){%>
        <div class="weui_panel">
            <div class="weui_panel_hd"><%=list[i].headimgurl%></div>
            <div class="weui_panel_bd">
                <div class="weui_media_box weui_media_text">
                    <h4 class="weui_media_title"><%=list[i].city%></h4>
                    <p class="weui_media_desc" style="-webkit-line-clamp:100000"><%=list[i].nickname%></p>
                    <ul class="weui_media_info">
                        <li class="weui_media_info_meta">文字来源<span><%=list[i].city%></span></li>
                        <li class="weui_media_info_meta">时间<span><%=list[i].time%></span></li>
                        <li class="weui_media_info_meta"><span><%=list[i].source%></span></li>
                        <li class="weui_media_info_meta"><a href="javascript:;" class="">按钮</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <% } %>
    </script>
</head>

<body ontouchstart>
<div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img
                src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                alt=""></div>
        <div class="swiper-slide"><img
                src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                alt=""></div>
        <div class="swiper-slide"><img
                src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                alt=""></div>
    </div>
    <div class="swiper-pagination swiper-pagination-bullets"><span
            class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span
            class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
</div>
<div class="container" style="padding-bottom: 55px;">
    <!--<div class="weui_panel">-->
    <!--<div class="weui_panel_hd">文字列表附来源</div>-->
    <!--<div class="weui_panel_bd">-->
    <!--<div class="weui_media_box weui_media_text">-->
    <!--<h4 class="weui_media_title">标题一</h4>-->
    <!--<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
    <!--<ul class="weui_media_info">-->
    <!--<li class="weui_media_info_meta">文字来源</li>-->
    <!--<li class="weui_media_info_meta">时间</li>-->
    <!--<li class="weui_media_info_meta weui_media_info_meta_extra">其它信息</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="weui_panel">-->
    <!--<div class="weui_panel_hd">文字列表附来源</div>-->
    <!--<div class="weui_panel_bd">-->
    <!--<div class="weui_media_box weui_media_text">-->
    <!--<h4 class="weui_media_title">标题一</h4>-->
    <!--<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
    <!--<ul class="weui_media_info">-->
    <!--<li class="weui_media_info_meta">文字来源</li>-->
    <!--<li class="weui_media_info_meta">时间</li>-->
    <!--<li class="weui_media_info_meta weui_media_info_meta_extra">其它信息</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->

    <div class="weui-infinite-scroll" id="list">
        <div class="infinite-preloader"></div><!-- 菊花 -->
        正在加载... <!-- 文案，可以自行修改 -->
    </div>
</div>
<div class="tab-panel" style="position: fixed;width: 100%;position: fixed;bottom: 0;">
    <div class="weui_tab">
        <div class="weui_tab_bd">

        </div>
        <div class="weui_tabbar">
            <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
                <div class="weui_tabbar_icon">
                    <img src="jquery-weui/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui_tabbar_label">微信</p>
            </a>
            <a href="javascript:;" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="jquery-weui/demos/images/icon_nav_msg.png" alt="">
                </div>
                <p class="weui_tabbar_label">通讯录</p>
            </a>
            <a href="javascript:;" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="jquery-weui/demos/images/icon_nav_article.png" alt="">
                </div>
                <p class="weui_tabbar_label">发现</p>
            </a>
            <a href="javascript:;" class="weui_tabbar_item">
                <div class="weui_tabbar_icon">
                    <img src="jquery-weui/demos/images/icon_nav_cell.png" alt="">
                </div>
                <p class="weui_tabbar_label">我</p>
            </a>
        </div>
    </div>
</div>


</body>
<script src="jquery-weui/dist/lib/jquery-2.1.4.js"></script>
<script src="jquery-weui/dist/js/jquery-weui.js"></script>

<script type='text/javascript' src='jquery-weui/dist/js/swiper.js' charset='utf-8'></script>
<script type="text/javascript">
    $(".swiper-container").swiper();
    var loading = false;  //状态标记
    $(document.body).infinite(500).on("infinite", function () {
        if (loading) return;
        loading = true;
        setTimeout(function () {
            $("#list").before("<p> 我是新加载的内容 </p><p> 我是新加载的内容 </p><p> 我是新加载的内容 </p><p> 我是新加载的内容 </p><p> 我是新加载的内容 </p>");
            loading = false;
        }, 1500);   //模拟延迟
    });
    $.ajax({
        type: "get",
        url: "data.json",
        success: function (json) {
            var temhtml = _.template($("#jsontem").html());
            var htnlTem = temhtml(json);
            $("#list").before(htnlTem);
        }
    })
    /**
     * 根据JSON制造html
     * @param {Object} jsonStr 数据源 例如
     * [{"id":"5","skid":"2"},{"id":"6","skid":"2"}]
     * @param {Object} temp 模板 <li>编号：$id</li><li>类目编号：$skid</li>
     * return <li>编号：5</li><li>类目编号：2</li><li>编号：6</li><li>类目编号：2</li>
     */
   	function json2temp(jsonStr,temp){
   		
   	}
</script>

</html>